<template>
	<view class="content">
		<!-- navbar部分 -->
				<u-navbar
					@leftClick="backHome"
					:autoBack="false"
					:bgColor="'rgba(15, 23, 79,1)'"
					:leftIconColor="'rgba(255,255,255,1)'"
					leftText="气体环境"
					style="margin-bottom: 128rpx;"
					>
				</u-navbar>
				<!-- 内容区域 -->
				<view class="Select">
					<!-- 下拉框 -->
						<uni-data-select
						v-model="value"
						:localdata="range"
						@change="change"
						class="SelectBox"
						>
						</uni-data-select>
					<view class="Databtn">
						<uni-datetime-picker v-model="scsj" @change="changeLog" />
					</view>
						 <!-- 查看趋势图 -->
						<button class="chartClick" @click="toTrend">趋势图</button>
						 <!-- 搜索按钮 -->
						<button class="topBtn"  @click="searchAlarm">
						 	<uni-icons type="search" size="20" color="#fbfbfc" style="margin-right: 2rpx;"></uni-icons>
						</button>
				</view>
				
				<!-- 表格区域 -->
				<view class="qthj">
					<table  class="table">
						<thead>
							<tr>
								<th align="center" width="35rpx">甲烷</th>
								<th align="center" width="45rpx">硫化氢</th>
								<th align="center" width="35rpx">氨气</th>
								<th align="center" width="35rpx">氧气</th>
								<th align="center" width="40rpx">湿度</th>
								<th align="center" width="40rpx">温度</th>
								<th align="center" width="145rpx">创建时间</th>
							</tr>
						</thead>
						<tbody v-if="gasArry.length>0">
							<tr v-for="(item,key) in pagedGasArry" :key='item.id'>
								<td align="center">{{item.o2}}</td>
								<td align="center">{{item.ch4}}</td>
								<td align="center">{{item.h2s}}</td>
								<td align="center">{{item.nh3}}</td>
								<td align="center">{{item.hjsd}}</td>
								<td align="center">{{item.hjwd}}</td>
								<td align="center">{{parseTime(item.scsj)}}</td>
							</tr>
						</tbody>
						<tbody v-else>
						    <tr>
									<td colspan="12" style="text-align: center;padding-top: 100rpx;">暂无数据</td>
						    </tr>
						</tbody>
					</table>
				</view>
			<!-- 分页器 -->
			<view class="pageBox" v-if="totalItems > 0" >
			  <button class="Previous" @click="prevPage" :disabled="currentPage === 1">
					<uni-icons type="back" size="20"></uni-icons>
				</button>
			  <view class="pagination" v-for="page in totalPages" :key="page">
			    <button class="paginationBtn"  @click="changeToPage(page)" :class="{ active: page === currentPage }">{{ page }}</button>
				</view>
			  <button class="Nextpage" @click="nextPage" :disabled="currentPage === totalPages">
					<uni-icons type="forward" size="20"></uni-icons>
				</button>
			</view>
	</view>
</template>

<script>
	import {gasenvState} from '@/api/gas/gas.js'
	import {equipmentLion} from '@/api/equipment/equipment.js'
	import {gasParameter} from '@/api/Trendchart/Trendchart.js'
	import cookie from '../../../cookie.js'
	
	export default {
		data() {
			return {
				 token:cookie.get('access_token'),
				 secretKey:cookie.get('secretKey'),
				 //机器人选择
				 value:cookie.get('robotid'),
				 text:cookie.get('robot_name'),
				 range:[
				 	{value:"", text:""}
				 ],
				 //机器人名称
				 robot_name:cookie.get('robot_name'),
				 //被选中的机器人
				 ranges:{},
			 	 //接收气体环境参数
				 gasArry:[],
				 //选择的时间
				 scsj:undefined,
				
				//分页器
				pageSize: 5, // 每页显示条数
				currentPage: 1, // 当前页码
				
				//获取趋势图所需气体参数
				value1: '',
				range1: [
				 { value: "", text: "" }
				],
				
			}
		},
		onLoad() {
			this.robotList() //机器人切换
			this.gasList()  //气体参数
		},
		mounted() {
			this.gasList()  //气体参数
			this.TrendChart()
		},
		computed: {
		    totalItems() {
		      return this.gasArry.length; // 总数据条数
		    },
		    totalPages() {
		      return Math.ceil(this.totalItems / this.pageSize); // 总页数
		    },
		    pagedGasArry() {
		      const start = (this.currentPage - 1) * this.pageSize;
		      const end = start + this.pageSize;
		      return this.gasArry.slice(start, end); // 当前页的数据
		    },
		},
		methods:{
			initPullDownRefresh() {
			  uni.startPullDownRefresh(); // 主动触发下拉刷新
			},
			onPullDownRefresh() {
				this.scsj = ''; // 清空当前选择的时间
			  this.refreshData(); // 下拉刷新时执行相应的逻辑操作
			},
			refreshData() {
			    // 下拉刷新时重新加载数据
			   this.robotList() //机器人切换
			   this.gasList()  //气体参数
			
			    // 在1秒后停止下拉刷新
			    setTimeout(() => {
			      uni.stopPullDownRefresh();
			    }, 500);
			},
			//分页器
			prevPage() {
			  if (this.currentPage > 1) {
			    this.currentPage--;
			  }
			},
			nextPage() {
			  if (this.currentPage < this.totalPages) {
			    this.currentPage++;
			  }
			},
			changeToPage(page) {
			  if (page === '...') {
				  return;
				}
				this.currentPage = page;
			},
			//获取机器人信息
			robotList(){
				equipmentLion(this.token,this.secretKey).then(Response=>{
					Response.rows.map(item =>{
					  this.range = Response.rows.map(({ id, robot_name }) => ({ value: id, text: robot_name }));
					})
				})
			},
			//获取趋势图中所需气体参数
			TrendChart(){
				gasParameter(this.token,this.secretKey).then(Response=>{
					Response.rows.map(item =>{
						this.range1 = Response.rows.map(({ id, param_name }) => ({ value: id, text: param_name }))
					})
				})
			},
			//气体参数
			gasList(){
					gasenvState(this.token,this.secretKey,this.robot_name,this.scsj).then(Response=>{
						this.gasArry = Response.rows
					})
			},
			//机器人选择
			change(e) {
				this.ranges = this.range.find(item => item.value === e)
				cookie.set('robotid',this.ranges.value)
				cookie.set('robot_name',this.ranges.text)
				this.robot_name = this.ranges.text
				this.gasList()
			},
			changeLog(e) {
				//截取时间年月日
				this.scsj = e.substring(0, 10)
			},
			//搜索
			searchAlarm(){
				this.robot_name = this.text
				this.scsj = this.scsj; // 手动更新scsj的值
				this.gasList()  //气体参数
			},
			backHome(){
				uni.switchTab({
					url:'/pages/index'
				})
			},
			toTrend(row){
				uni.navigateTo({
					url:'/pages/common/Trendchart/Trendchart'
				})
			},
			//处理时间戳
			parseTime(time, pattern) {
			  if (arguments.length === 0 || !time) {
			    return null
			  }
			  const format = pattern || '{y}-{m}-{d} {h}:{i}:{s}'
			  let date
			  if (typeof time === 'object') {
			    date = time
			  } else {
			    if ((typeof time === 'string') && (/^[0-9]+$/.test(time))) {
			      time = parseInt(time)
			    } else if (typeof time === 'string') {
			      time = time.replace(new RegExp(/-/gm), '/').replace('T', ' ').replace(new RegExp(/\.[\d]{3}/gm), '');
			    }
			    if ((typeof time === 'number') && (time.toString().length === 10)) {
			      time = time * 1000
			    }
			    date = new Date(time)
			  }
			  const formatObj = {
			    y: date.getFullYear(),
			    m: date.getMonth() + 1,
			    d: date.getDate(),
			    h: date.getHours(),
			    i: date.getMinutes(),
			    s: date.getSeconds(),
			    a: date.getDay()
			  }
			  const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
			    let value = formatObj[key]
			    // Note: getDay() returns 0 on Sunday
			    if (key === 'a') { return ['日', '一', '二', '三', '四', '五', '六'][value] }
			    if (result.length > 0 && value < 10) {
			      value = '0' + value
			    }
			    return value || 0
			  })
			  return time_str
			},
		}
		
	}
</script>

<style lang="scss">
*{
		margin: 0;
		padding: 0;
	}
	page{
		 background: #F5F5F5;
	}
	.content {
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  justify-content: center;
		margin-top: 60rpx;
	}
	.Select{
		width: 710rpx;
		height: 65rpx;
		// margin-top: 128rpx;
		z-index: 99;
		display: flex;
		justify-content: center;
		align-items: center;
		// background-color: chartreuse;
	}
	.SelectBox{
		width: 176rpx;
		height: 65rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 5rpx 6rpx 0rpx rgba(22,33,135,0.08);
		border-radius: 10rpx;
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #999999;
	}
	.SelectBox /deep/ .uni-icons{
		font-size: 0px !important;
	}
	.Databtn{
		width: 218rpx;
		height: 65rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 5rpx 6rpx 0rpx rgba(22,33,135,0.08);
		border-radius: 10rpx;
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		color: #999999;
		font-weight: 400;
		margin-left:10rpx;
		display:flex;
		justify-content: center;
		align-items: center;
	}
	.Databtn /deep/ .uni-icons{
		font-size: 0px !important;
	}
	.topBtn{
		width: 68rpx;
		height: 54rpx;
		background: #0F174F;
		border-radius: 27rpx;
		margin-left: 15rpx;
		font-size: 26rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #FFFFFF;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.qthj{
		width: 710rpx;
		height: 760rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 5rpx 6rpx 0rpx rgba(22,33,135,0.08);
		border-radius: 12rpx;
		margin-top: 50rpx;
	}
	//表格
	.table{
		border: none;
		border-spacing: 0;
	}
	.table thead{
		background: #E8E9EF;
		border-radius: 12rpx;
		font-size: 26rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #333333;
	}
	.table tbody tr:nth-child(even) {
	    background: #F1F4FE;
	}
	.table tbody tr {
		height: 76rpx;
		border-radius: 10rpx;
	}
	.table thead th{
		height: 76rpx;
	}
	
//分页器
.pageNatino{
	width: 710rpx;
	height: 100rpx;
	margin-top: 20rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	// background-color: cadetblue;
}
.chartClick{
	width: 150rpx;
	height: 65rpx;
	font-size: 24rpx;
	font-family: Source Han Sans CN;
	font-weight: 400;
	color: #999999;
	margin-left: 15rpx;
	background: #FFFFFF;
	box-shadow: 0rpx 5rpx 6rpx 0rpx rgba(22,33,135,0.08);
	border-radius: 10rpx;
}
//分页器
	.pageBox{
		width: 455rpx;
		margin-top: 44rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		box-sizing: border-box;
		//background-color: chocolate;
	}
	//上一页
	.Previous{
		width: 40rpx;
		height: 40rpx;
		background: #EDEDED;
		border: 1px solid #000000;
		// border-radius: 4rpx;
		font-size: 8rpx;
		color: #666666;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	//下一页
	.Nextpage{
		width: 40rpx;
		height: 40rpx;
		border: 1px solid #142150;
		// border-radius: 4rpx;
		font-size: 8rpx;
		color: #666666;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.paginationBtn{
		width: 40rpx;
		height: 40rpx;
		font-size: 16rpx;
		font-family: Myriad Pro;
		font-weight: 400;
		color: #333333;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-left: 20rpx;
		border: 1px solid #142150;
		// border-radius: 4rpx;
	}
	.active{
		width: 40rpx;
		height: 40rpx;
		background: #142150;
		// border-radius: 4rpx;
		font-size: 16rpx;
		font-family: Helvetica;
		font-weight: bold;
		color: #FFFFFF;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>
